<template>
  <section class="mark-point-wrap">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- <el-tab-pane v-for="item in tabsList"
        :key="item.typeId" :label="item.typeName"
        :id="item.typeId" :name="item.typeId"></el-tab-pane> -->
        <el-tab-pane label="设备楼层撒点" name="floorPoint"></el-tab-pane>
        <el-tab-pane label="设备房间撒点" name="areaPoint"></el-tab-pane>
      </el-tabs>
    <el-card>
      <div class="search-con">
        <el-form :inline="true">
          <el-form-item label="楼栋：">
            <el-select
              ref="build"
              class="point-filter-select"
              v-model="bNo"
              placeholder="请选择楼栋"
              @change="bNoChange"
            >
              <el-option v-for="item in buildList" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="楼层：">
            <el-select
              ref="floor"
              class="point-filter-select"
              v-model="fNo"
              placeholder="请选择楼层"
              @change="fNoChange"
            >
              <el-option v-for="item in floorList" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间/区域" v-if="activeName === 'areaPoint'">
            <el-select
              clearable
              ref="area"
              class="point-filter-select"
              v-model="aNo"
              placeholder="请选择房间/区域"
              @change="aNoChange"
            >
              <el-option v-for="item in areaList" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" class="tip-btn">
            <div class="tip-con" @click="tipClick">
              <span>操作提示</span>
              <span class="icon-question">?</span>
            </div>
          </el-form-item>
          <!-- <el-form-item label="宽度：">
            <el-input class="canvas-setup-input" v-model="inputWidth"></el-input>
          </el-form-item>
          <el-form-item label="高度：">
            <el-input class="canvas-setup-input" v-model="inputHeight"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="setSize">设置尺寸</el-button>
          </el-form-item> -->
        </el-form>
        <el-button v-if="checkAuthority('/equipment/save')" type="primary" @click="saveSettings">保存设置</el-button>
      </div>
    </el-card>

    <el-card>
      <el-row type="flex" class="row-bg">
        <el-col :span="20">
          <div class="point-map">
            <canvas
              id="pointApp"
              :width="mapWidth"
              :height="mapHeight"
              @dragover="dotDragOver"
              @drop="dotDrop($event)"
            ></canvas>
          </div>
        </el-col>
        <el-col :span="4">
          <h3 class="device-list-title">设备列表</h3>
          <div class="device-list-filter">
            <el-checkbox class="filter-checkbox" v-model="curFloorDevice" @change="curDeviceTypeChange"
              >仅显示当前楼层设备</el-checkbox
            >
            <el-select
              clearable
              v-model="deviceTypeId"
              :disabled="havaChange"
              placeholder="请选择设备类型"
              @change="deviceTypeChange"
            >
              <el-option
                v-for="item in deviceTypeList"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeId"
              >
              </el-option>
            </el-select>
          </div>
          <div class="device-list-wrap">
            <ul class="device-list">
              <li
                v-for="item in deviceList"
                v-show="!item.hidden"
                :key="item.eqptId"
                draggable="true"
                @mouseleave="devicePopHide"
                @mousemove="devicePopShow($event, item)"
                @dragstart="dotDragStart($event, item)"
                :style="(item.mapX && item.mapY) || (item.areaMapX && item.areaMapY) ? 'color: red' : ''"
              >
                {{ item.eqptName }}
                <template v-if="item.areaMapX && item.areaMapY">
                  ({{ item.eqptAdress}})
                </template>
                <template v-if="(item.mapX && item.mapY) && (!item.areaMapX && !item.areaMapY)">
                  ({{ item.buildName }} {{ item.floorName }})
                </template>
              </li>
            </ul>
            <div
              class="device-list-pop"
              :style="'left:' + nowDevicePopData.left + ';top:' + nowDevicePopData.top"
              v-show="showDevicePop"
            >
              <p>设备地点：{{ nowDevicePopData.buildName }}{{nowDevicePopData.floorName}}</p>
              <p>设备名称：{{ nowDevicePopData.eqptName }}</p>
              <!-- <p>设备类型：{{ nowDevicePopData.deviceType }}</p> -->
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>

<script>
import zrender from 'zrender'
// import { buildList } from '@/utils/floor'
import { createBackground, dotTransfer } from '@/views/children/dcenter/js/canvas'
import deviceData from '@/mock/device'
import { getListByTag, getEquipmentList, modifyEqpt, getDeviceTypeList, getImgSource } from '@/views/children/safety/js/device'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限
import NP from 'number-precision'
// const deviceTypeList = [
//   { value: 1, label: '摄像机' },
//   { value: 2, label: '烟感' },
//   { value: 3, label: '门禁' },
//   { value: 4, label: '地磁' }
// ]
export default {
  name: 'DeviceManage',
  data () {
    return {
      activeName: 'floorPoint',
      saveDeviceVisible: false,
      // deviceTypeList, // 设备类型列表（临时，需后端传入）
      nowDeviceType: [], // 当前选中的设备类型列表
      // buildList, // 所有楼栋楼层数据
      showDevicePop: false, // 是否显示设备详情弹窗
      nowDevicePopData: {}, // 当前hover的设备详情
      isMap: false, // 画面上是否有地图
      mapIns: null, // 地图实例
      // floorList: [], // 当前楼栋楼层数据
      // deviceList: [], // 当前点位数据
      nowImg: '', // 当前选中楼层图片
      bNo: '', // 楼栋
      fNo: '', // 楼层
      aNo: '', // 区域或房间
      mapWidth: 1000, // 楼层图片默认宽度
      mapHeight: 800, // 楼层图片默认高度
      inputWidth: 1000, // 楼层图片设置宽度
      inputHeight: 800, // 楼层图片设置高度
      dotBgColor: [
        '#409EFF',
        '#c23531',
        '#2f4554',
        '#61a0a8',
        '#d48265',
        '#91c7ae',
        '#749f83',
        '#ca8622',
        '#bda29a',
        '#6e7074',
        '#546570',
        '#c4ccd3'
      ], // 点位背景颜色
      nowColorObj: {}, // 当前已经被选择过的颜色对象
      nowColorNum: 0, // 当前已经被选择过的颜色位置
      startPosition: {}, // dragStart时位置保存
      selectedDragItem: null, // 当前被拖拽中的设备
      isRepeat: false, // 是否重复的点
      curFloorDevice: false, // 仅显示当前楼层，默认为否
      buildList: [],
      floorList: [],
      areaList: [],
      roomList: [],
      floorAreaList: [],
      activeSpotId: '',
      deviceList: [],
      deviceTypeId: '',
      deviceTypeList: [],
      havaChange: false,
      copyDeviceData: [],
      tempArr: [],
      canvasNum: 1
    }
  },

  components: {},
  watch: {
    deviceList: {
      handler (val) {
        this.havaChange = val.findIndex(e => e.isChange) !== -1
      },
      deep: true
      // immediate: true
    }
  },
  computed: {
    buildName () {
      return this.$refs.build.selectedLabel
    },
    floorName () {
      return this.$refs.floor.selectedLabel
    }
    // havaChange() {
    //   return this.deviceList.findIndex(e => e.isChange) !== -1
    // }
  },
  created () {
    this.getListByTag(0, 1, 'buildList')
    this.getDeviceTypeList()
  },
  mounted () {
    // this.inputWidth = this.mapWidth
    // this.inputHeight = this.mapHeight
    // 获取所有设备数据
    this.deviceList = [].concat(deviceData)
    // this.deviceList.forEach(item => {
    //   item.show = true
    // })
    this.mapIns = zrender.init(document.getElementById('pointApp'))
  },
  methods: {
    checkAuthority,
    handleClick (val) {
      this.isMap = false
      this.mapIns.clear()
      this.bNo = ''
      this.fNo = ''
      this.aNo = ''
      if (val === 'floorPoint') {
        this.aNo = ''
      } else {
      }
    },
    // 获取楼层信息
    async getListByTag (parentId, tag, arr) {
      const params = {
        parentId,
        tag
        // tenantNo: localStorage.getItem('Standard__Tenant-No')
        // tenantNo: { expire: 1640323318643 }
      }
      const { data } = await getListByTag(params)
      this[arr] = data
    },
    // 获取设备类型
    async getDeviceTypeList () {
      const params = {
        typeName: '', // 类型名称
        typeParentId: '' // 父类型id
      }
      const { data } = await getDeviceTypeList(params)
      this.deviceTypeList = data
      if (data && data.length) {
        this.deviceTypeId = data[0].eqptTypeId
        this.getEquipmentList(this.deviceTypeId)
      }
    },

    // 获取设备信息
    async getEquipmentList (eqptTypeId) {
      const params = {
        current: 1,
        pageSize: 1000,
        eqptTypeId: eqptTypeId
        // tenantNo: localStorage.getItem('tenantNo')
      }
      const { data } = await getEquipmentList(params)
      this.deviceList = data.records
      this.copyDeviceData = data.records
      // this.copyDeviceData = [...data.records]
      if (this.bNo && this.fNo) {
        if (this.activeName === 'floorPoint') {
          this.fNoChange(this.fNo)
        } else {
          this.aNoChange(this.aNo)
        }
      }
    },

    // 楼栋切换
    bNoChange (val) {
      this.isMap = false
      // let tempList = this.buildList.find(item => item.buildingNo === val)
      // if (tempList.floorArr.length) {
      //   this.floorList = tempList.floorArr
      // }
      this.mapIns.clear()
      this.fNo = ''
      this.aNo = ''
      this.getListByTag(val, 2, 'floorList')
    },

    // 楼层切换
    async fNoChange (val) {
      this.isMap = false
      this.mapIns.clear()
      this.curFloorDevice = false
      this.nowImg = ''
      if (this.activeName === 'areaPoint') {
        // this.aNo = ''
        await this.getListByTag(val, 3, 'areaList')
        await this.getListByTag(val, 4, 'roomList')
        this.roomList.forEach(item => {
          this.areaList.push(item)
        })
        return
      }
      const params = {
        current: 1,
        pageSize: 1000,
        eqptTypeId: this.eqptTypeId
        // tenantNo: localStorage.getItem('tenantNo')
      }
      const { data } = await getEquipmentList(params)
      this.tempArr = data.records
      let copyDevice = this.deviceList
      copyDevice.forEach((item, index) => {
        if (item.isChange) {
          this.tempArr.forEach(startItem => {
            if (item.eqptId === startItem.eqptId) {
              this.deviceList[index] = startItem
            }
          })
        }
      })

      let temp = this.floorList.find(item => item.id === this.fNo)
      if (temp.mapUrl.slice(0, 4) !== 'blob') {
        const resImg = await getImgSource(temp.mapUrl)
        let blob = new Blob([resImg], {
          type: resImg.type
        })
        let url = window.URL.createObjectURL(blob)
        this.nowImg = url
      } else {
        this.nowImg = temp.mapUrl
      }
      let obj = await this.getImgWh() // 获取图片宽高
      this.mapWidth = obj.width
      this.mapHeight = obj.height
      // this.mapWidth = 1000
      // this.mapHeight = 800
      this.isMap = true
      this.curDeviceTypeChange(this.curFloorDevice)
      this.$forceUpdate()
      // 切换后的处理
      this.mapIns.add(createBackground(this.nowImg, this.mapWidth, this.mapHeight))
      let tempList = this.getFloorDevice()
      tempList.forEach(item => {
        // let newDot = this.createDot(item, item.mapX, item.mapY)
        let newDot = this.createDot(item, NP.times(item.mapX, this.inputWidth), NP.times(item.mapY, this.inputHeight))
        this.mapIns.add(newDot)
      })
    },

    // 区域切换
    async aNoChange (val) {
      this.isMap = false
      this.mapIns.clear()
      this.curFloorDevice = false
      this.nowImg = ''
      const params = {
        current: 1,
        pageSize: 1000,
        eqptTypeId: this.eqptTypeId
        // tenantNo: localStorage.getItem('tenantNo')
      }
      const { data } = await getEquipmentList(params)
      this.tempArr = data.records
      let copyDevice = this.deviceList
      copyDevice.forEach((item, index) => {
        if (item.isChange) {
          this.tempArr.forEach(startItem => {
            if (item.eqptId === startItem.eqptId) {
              this.deviceList[index] = startItem
            }
          })
        }
      })
      this.isMap = true
      let temp = this.areaList.find(item => item.id === this.aNo)
      if (temp.mapUrl.slice(0, 4) !== 'blob') {
        const resImg = await getImgSource(temp.mapUrl)
        let blob = new Blob([resImg], {
          type: resImg.type
        })
        let url = window.URL.createObjectURL(blob)
        this.nowImg = url
      } else {
        this.nowImg = temp.mapUrl
      }
      let obj = await this.getImgWh() // 获取图片宽高
      this.mapWidth = obj.width
      this.mapHeight = obj.height
      // this.mapWidth = 1000
      // this.mapHeight = 800
      this.isMap = true
      this.curDeviceTypeChange(this.curFloorDevice)
      this.$forceUpdate()
      // 切换后的处理
      this.mapIns.clear()
      this.mapIns.add(createBackground(this.nowImg, this.mapWidth, this.mapHeight))
      let tempList = this.getAreaDevice()
      tempList.forEach(item => {
        let newDot = this.createDot(item, NP.times(item.areaMapX, this.inputWidth), NP.times(item.areaMapY, this.inputHeight))
        this.mapIns.add(newDot)
      })
    },
    // 设置画布尺寸
    setSize () {
      if (this.mapWidth === this.inputWidth && this.mapHeight === this.inputHeight) {
        this.$message({
          type: 'info',
          message: '尺寸并未改变'
        })
        return
      }
      let lastWidth = this.mapWidth // 上次宽度
      let lastHeight = this.mapHeight // 上次高度
      this.$confirm('尺寸变换会导致所有已设置的点位信息进行对应的变换，请确定进行尺寸的变换?', '提示(请谨慎使用)', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.mapWidth = this.inputWidth || 0
          this.mapHeight = this.inputHeight || 0
          // 重新渲染地图
          this.deviceList.forEach(item => {
            if (item.pos && item.pos.fNo) {
              let pos = dotTransfer(item.pos.x, item.pos.y, lastWidth, lastHeight, this.mapWidth, this.mapHeight)
              item.pos.x = pos.newX
              item.pos.y = pos.newY
            }
          })
          this.fNoChange()
          this.$message({
            type: 'info',
            message: '尺寸设置成功'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消尺寸设置'
          })
        })
    },
    // 找到某楼层所有设备
    getFloorDevice () {
      // console.log(this.fNo)
      // console.log(this.deviceList)
      return this.deviceList.filter(item => {
        item.relevance = true
        return item.mapX && item.mapY && +item.floorId === this.fNo
      })
    },
    // 找到某区域所有设备
    getAreaDevice () {
      return this.deviceList.filter(item => {
        item.relevance = true
        return item.areaMapX && item.areaMapY && +item.areaId === this.aNo
      })
    },
    // 设备列表详情显示
    devicePopShow (e, item) {
      let temp = Object.assign({}, item)
      temp.left = e.clientX + 30 + 'px'
      temp.top = e.clientY - 25 + 'px'
      this.nowDevicePopData = temp
      this.showDevicePop = true
    },
    // 设备列表详情隐藏
    devicePopHide () {
      this.showDevicePop = false
    },
    // 点位拖拽开始
    dotDragStart (e, item) {
      // 是否地图上已有的点(包括其他楼层)
      // item.color = 'red'
      if (this.activeName === 'floorPoint') {
        this.isRepeat = (item.mapX && item.mapY) && (this.fNo !== +item.floorId)
        if (this.fNo !== +item.floorId) {
          this.$message.error('该设备不属于该楼层，无法撒点！')
          this.isRepeat = true
          // return
        }
      } else {
        this.isRepeat = (item.areaMapX && item.areaMapY) && (this.aNo !== +item.areaId)
        if (this.aNo !== +item.areaId) {
          this.$message.error('该设备不属于该房间，无法撒点！')
          this.isRepeat = true
          // return
        }
      }
      // && (item.floorId || item.areaId) // 有位置信息就代表是已有点位
      if (this.isRepeat) return
      if (!this.isMap) return
      this.selectedDragItem = item
    },
    // 点位拖拽
    dotDragOver (e) {
      if (this.isRepeat) return
      if (!this.isMap) return
      e.preventDefault()
    },
    // 点位结束
    dotDrop (e) {
      // e.offsetX,e.offsetY为在canvas中的坐标
      // true: 当前设备更改过信息
      let newDot = this.createDot(this.selectedDragItem, e.offsetX, e.offsetY, true)
      this.mapIns.add(newDot)
    },
    // 设定背景颜色
    createDotColor (obj) {
      if (!this.nowColorObj[obj.deviceType]) {
        this.nowColorObj[obj.deviceType] = this.dotBgColor[this.nowColorNum]
        this.nowColorNum++
      }
      return this.nowColorObj[obj.deviceType]
    },
    // 插入点位的方法
    createDot (obj, x, y, isChange) {
      let dot = new zrender.Circle({
        zlevel: 0,
        draggable: true,
        style: {
          text: obj.eqptName[0], // 取第一个字
          fill: '#409eff',
          textFill: '#fff'
        },
        shape: {
          cx: 0,
          cy: 0,
          r: 16
        },
        position: [x, y]
      })
      // 此处修改会直接影响deviceList的值
      // obj.pos = {}
      // obj.pos.x = x
      // obj.pos.y = y
      // obj.pos.bNo = this.bNo
      // obj.pos.fNo = this.fNo
      if (isChange) {
        let params = {
          isChange
          // buildName: this.buildName,
          // floorName: this.floorName,
          // buildId: this.bNo,
          // floorId: this.fNo,
          // mapX: x / this.inputWidth,
          // mapY: y / this.inputHeight
        }
        if (this.activeName === 'floorPoint') {
          this.$set(obj, 'isChange', true)
          params.mapX = NP.divide(x, this.inputWidth)
          params.mapY = NP.divide(y, this.inputHeight)
        } else {
          this.$set(obj, 'isChange', true)
          params.areaMapX = NP.divide(x, this.inputWidth)
          params.areaMapY = NP.divide(y, this.inputHeight)
        }
        Object.assign(obj, params)
      }
      // this.deviceList.push(obj)
      dot.on('dblclick', () => {
        this.$confirm('是否删除当前点位信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.mapIns.remove(dot)
            this.deviceList.forEach(item => {
              if (item.eqptId === obj.eqptId) {
                if (this.activeName === 'floorPoint') {
                  item.mapX = ''
                  item.mapY = ''
                } else {
                  item.areaMapX = ''
                  item.areaMapY = ''
                }
                this.$set(obj, 'isChange', item.relevance)
              }
            })
            // this.$message({
            //   type: 'success',
            //   message: '删除成功!'
            // })
            this.curDeviceTypeChange(this.curFloorDevice)
            this.$forceUpdate()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      })
      dot.on('mousemove', e => {
        this.dotPopShow(obj, e)
      })
      dot.on('mouseout', () => {
        this.dotPopHide()
      })
      dot.on('dragstart', e => {
        this.startPosition = { x: e.offsetX, y: e.offsetY }
        this.dotPopHide()
      })
      dot.on('drag', () => {
        this.dotPopHide()
      })
      dot.on('dragend', e => {
        let isMove = e.offsetX === this.startPosition.x && e.offsetY === this.startPosition.y
        if (e.offsetX > this.mapWidth - 16 || e.offsetY > this.mapHeight - 16 || e.offsetX < 0 || e.offsetY < 0) {
          dot.animateTo(
            {
              shape: {
                cx: 0,
                cy: 0,
                r: 16
              },
              position: [this.startPosition.x, this.startPosition.y]
            },
            0,
            0
          )
          this.$message.warning('拖动请勿超出范围，图标已移动至原先点位')
          // ({
          //   message: '拖动请勿超出范围，图标已移动至原先点位',
          //   type: 'warning'
          // })
        } else {
          this.deviceList.forEach(item => {
            if (item.eqptId === obj.eqptId) {
              dot.position = [e.offsetX, e.offsetY]
              this.$set(item, 'isChange', !isMove)
              if (this.activeName === 'floorPoint') {
                item.mapX = NP.divide(e.offsetX, this.inputWidth)
                item.mapY = NP.divide(e.offsetY, this.inputHeight)
              } else {
                item.areaMapX = NP.divide(e.offsetX, this.inputWidth)
                item.areaMapY = NP.divide(e.offsetY, this.inputHeight)
              }
              // item.buildId = this.bNo
            }
          })
        }
      })
      return dot
    },
    // 点位详情显示
    dotPopShow (item, e) {
      let temp = Object.assign({}, item)
      temp.left = e.event.screenX + 30 + 'px'
      temp.top = e.event.screenY - 115 + 'px'
      this.nowDevicePopData = temp
      this.showDevicePop = true
    },
    // 点位详情隐藏
    dotPopHide () {
      this.showDevicePop = false
    },
    // 保存设置
    saveSettings () {
      /*
        目前的效果是根据设备列表来保存的，根据列表中点位是否移动来判定
        筛选出所有被改变过的设备，提交最新的设备属性

        更改的效果：
        只要切换了楼层或者切换了楼栋后，之前保存的设备修改全部取消
      */
      // this.deviceList.forEach(item => {
      //   if (item.floorId !== this.fNo) {
      //     // isChange,
      //     item.buildName = ''
      //     item.floorName = ''
      //     item.buildId = ''
      //     item.floorId = ''
      //     item.mapX = ''
      //     item.mapY = ''
      //     delete item.isChange
      //   }
      // })
      let lastIndex = this.deviceList.map(e => e.isChange).lastIndexOf(true)
      this.deviceList.map((item, index) => {
        if (item.isChange) {
          // if (this.activeName === 'floorPoint') {
          //   item.mapX = item.mapX === '' ? '' : item.mapX * this.inputWidth
          //   item.mapY = item.mapY === '' ? '' : item.mapY * this.inputHeight
          // } else {
          //   item.areaMapX = item.areaMapX === '' ? '' : item.areaMapX * this.inputWidth
          //   item.areaMapY = item.areaMapY === '' ? '' : item.areaMapY * this.inputHeight
          // }
          // console.log(item.mapX * this.inputWidth, item.mapY * this.inputHeight)
          this.modifyEqpt(item).then(() => {
            if (lastIndex === index) {
              this.getEquipmentList(this.deviceTypeId)
              this.$message.success('保存成功')
            }
          })
        }
      })
    },
    // 获取图片宽高
    getImgWh () {
      return new Promise((resolve, reject) => {
        let img = new Image()
        img.src = this.nowImg
        img.onload = () => {
          resolve({
            width: img.width,
            height: img.height
          })
        }
      })
    },
    // getImgWH () {
    //   // const canvas = document.getElementById('pointApp')
    //   // let ctx = canvas.getContext('2d')
    //   let img = new Image() // 创建img
    //   img.src = this.nowImg // 路径
    //   img.onload = () => {
    //     console.log('onload')
    //     this.mapWidth = img.width
    //     this.mapHeight = img.height
    //     // ctx.drawImage(img, 0, 0, this.mapWidth, this.mapHeight)
    //     // let pattern = ctx.createPattern(img, 'no-repeat')
    //     // ctx.fillStyle = pattern
    //     this.$forceUpdate()
    //   }
    // },
    // 修改设备
    async modifyEqpt (row) {
      // const params = {
      //   attributes: fields.map(item => {
      //     return {
      //       column: item,
      //       value: row[item]
      //     }
      //   }),
      //   eqptId: row.eqptId,
      //   tenantNo: localStorage.getItem('tenantNo'),
      //   userNo: JSON.parse(localStorage.getItem('Standard__User-Info')).value.userNo
      // }
      const fields = ['buildName', 'floorName', 'buildId', 'floorId', 'mapX', 'mapY', 'eqptId', 'eqptName', 'areaMapX', 'areaMapY']
      let params = {
        // tenantNo: localStorage.getItem('tenantNo'),
        userNo: JSON.parse(localStorage.getItem('Standard__User-Info')).value.userNo
      }
      fields.forEach(e => {
        params[e] = row[e]
      })
      const res = await modifyEqpt(params)
      return res
    },
    // 设备类型改变回调
    deviceTypeChange (val) {
      // let indexChange = this.deviceList.findIndex(e => e.isChange)
      // if (indexChange !== -1) {
      //   this.saveDeviceVisible = true
      // }
      this.getEquipmentList(val)
    },
    // saveDeviceHandle() {
    //   this.saveDeviceVisible = false
    //   this.saveSettings()
    // },
    // 设备列表筛选
    curDeviceTypeChange () {
      if (this.curFloorDevice) {
        this.deviceList.forEach(item => {
          if (+item.floorId !== this.fNo) {
            this.$set(item, 'hidden', true)
          }
        })
      } else {
        this.deviceList.forEach(item => {
          if (item.hidden) {
            this.$set(item, 'hidden', false)
          }
        })
      }
    },
    tipClick () {
      // <li>3. 未保存设置时，切换楼层会重置设备操作(撒点、删除等)，不会单保存一个楼层。</li>
      let html = `
      <ul>
        <li>1. 双击点位可进行点位位置信息删除操作。</li>
        <li>2. 点位若拖出范围之外，会被弹回上一次的位置。</li>
        <li>3. 切换楼层前请保存当前楼层的操作，仅保存当前楼层的更改。</li>
        <li>4. 存在设备变更时，设备类型不可选择。</li>
      </ul>`
      this.$confirm(html, '操作提示', {
        customClass: 'customConfirm',
        type: 'info',
        center: true,
        showCancelButton: false,
        dangerouslyUseHTMLString: true
      })
        .then(() => {})
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.search-con {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .tip-btn {
    margin-left: 20px;
    cursor: pointer;
    span {
      font-size: 16px;
    }
    &:hover {
      color: #ff0000;
      .icon-question {
        border: 1px solid #ff0000;
      }
    }
    .tip-con {
      display: flex;
      align-items: center;
    }
    .icon-question {
      margin-left: 2px;
      width: 18px;
      height: 18px;
      border: 1px solid #333333;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.mark-point-wrap {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  .point-map {
    width: 100%;
    height: 100%;
    overflow-x: scroll;
  }
  .device-list-title {
    font-size: 16px;
    text-align: center;
  }
  .device-list-filter {
    margin-top: 10px;
    .filter-checkbox {
      margin-bottom: 10px;
    }
  }
  .device-list-wrap {
    height: 700px;
    margin-top: 10px;
    border: 1px solid #ddd;
    overflow: auto;
    .device-list {
      height: 100%;
      padding: 15px;
      box-sizing: border-box;
      li {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        cursor: pointer;
        user-select: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:hover {
          color: #1890ff;
        }
      }
    }
  }
  .device-list-pop {
    position: fixed;
    min-width: 120px;
    // width: 120px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid #ddd;
    border-radius: 10px;
    color: #fff;
    // p {
    //   overflow: hidden;
      // white-space: nowrap;
    //   text-overflow: ellipsis;
    // }
  }
  .row-tips {
    margin-top: 20px;
    font-size: 14px;
    h5 {
      color: #ff4949;
    }
  }
}
</style>
<style lang="scss">
.customConfirm {
  width: 485px;
  .el-message-box__content {
    text-align: left;
    padding: 20px 26px 26px 46px;
    li {
      height: 32px;
      line-height: 32px;
    }
  }
}
</style>
